<script lang="ts" setup>
  import { ref } from 'vue';
  import { PoweroffOutlined } from '@ant-design/icons-vue';
  import Space from '@sscd/space';
  import Button from '@sscd/button';
  interface DelayLoading {
    delay: number;
  }
  const iconLoading = ref<boolean | DelayLoading>(false);
  const loading = ref(false);
  const enterIconLoading = () => {
    iconLoading.value = { delay: 1000 };
    setTimeout(() => {
      iconLoading.value = false;
    }, 6000);
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">加载中状态</div>
    <div class="demo-content">
      <Space style="width: 100%; margin-bottom: 10px">
        <Button type="primary" loading>Loading</Button>
        <Button type="primary" size="small" loading>Loading</Button>
      </Space>
      <Space style="width: 100%; margin-bottom: 10px">
        <Button type="primary" :loading="loading" @mouseenter="loading = true"> mouseenter me! </Button>
        <Button type="primary" :loading="iconLoading" @click="enterIconLoading">
          <template #icon><PoweroffOutlined /></template>
          延迟1s
        </Button>
      </Space>
      <Space style="width: 100%">
        <Button type="primary" loading />
        <Button type="primary" shape="circle" loading />
        <Button danger shape="round" loading />
      </Space>
    </div>
  </div>
</template>
